<template>
  <div style="display:inline-block">
    <!-- <el-button type="success" @click="$emit('clickSearch')" icon="el-icon-search" size="mini" v-if="isShowSearch">{{$t(`button.search`)}}
    </el-button> -->
    <!-- <el-button  @click="exportExcel" icon="el-icon-download" size="mini">导出
    </el-button> -->
        <Button  icon="md-share-alt" @click="exportExcel"
        >导出</Button
      >
  </div>
</template>

<script>
  const tableToExcel = (function () {
    let cellWidth = "100px";
    let cellHeight = "34px";
    let cellTitleHeight = "36px";
    const uri = "data:application/vnd.ms-excel;base64,";
    // 设置导出表格的单元格默认高度/宽度/边框样式/字体颜色/背景颜色/居中，网页显示表格宽度建议1240，tr/td视情况而定
    // const template = `<html xmlns:x="urn:schemas-microsoft-com:office:excel"><head><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><meta charset="UTF-8"><style type="text/css">table td {border: 0.5px solid #000000;width:${cellWidth};height:${cellHeight};text-align: center;color: #000000;padding:26px;mso-number-format:'\@'}  th {border: 0.5px solid #000000;width:${cellWidth};height:${cellTitleHeight};padding:10px 0;text-align: center;color: #000000;}</style></head><body><table>{table}</table></body></html>`;
    const template =
      `<html xmlns:x="urn:schemas-microsoft-com:office:excel"><head><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><meta charset="UTF-8"><style type="text/css">table td {border: 0.5px solid #000000;width:${cellWidth};height:${cellHeight};text-align: center;color: #000000;padding:26px;}  th {border: 0.5px solid #000000;width:${cellWidth};height:${cellTitleHeight};padding:10px 0;text-align: center;color: #000000;}</style></head><body><table>{table}</table></body></html>`;
    const base64 = function (s) {
      return window.btoa(unescape(encodeURIComponent(s)));
    };
    const format = function (s, c) {
      return s.replace(/{(\w+)}/g, function (m, p) {
        return c[p];
      });
    };
    return function (table, filename, sheetname) {
      var fix = document.querySelector('.exportExcel');
      var wb;
      var innterHtml = "";
      if (fix) {
        // console.log(document.querySelector("#"+table))
        innterHtml = document.querySelector("#" + table)
        // .removeChild(fix);
        // document.querySelector("#" + table).appendChild(fix);
      } else {
        innterHtml = document.querySelector("#" + table);
      }

      // if (!table.nodeType) table = document.getElementById(table);

      // console.log(innterHtml)
      // console.log(innterHtml.innerHTML)
      const ctx = {
        worksheet: sheetname || "Worksheet",
        table: innterHtml.innerHTML//table.innerHTML
      };
      // var ctxs=
      const aTag = document.createElement("a");
      aTag.href = uri + base64(format(template, ctx));
      // console.log(aTag.href)

      if (filename.indexOf('.xlsx') == -1 && filename.indexOf('.xls') == -1) {
        filename = filename + ".xls"
      }

      aTag.download = filename;
      aTag.click();


    };
  })();
  import FileSaver from "file-saver";

  import XLSX from "xlsx";
  export default {
    name: "ExportExcel",
    props: {
      beforExport: Function,
      name: {
        type: String,
        default: "表格"
      },
      domName: {
        type: String,
        required: true
      },
      isShowSearch:{
        type:Boolean,
        default:true
      }
    },
    components: {},
    data() {
      return {
       
      };
    },
    computed: {},
    watch: {},
    methods: {
      exportExcel() {
        if (this.beforExport) {
          this.beforExport();
          this.$nextTick(function () {
            this.doExport();
            this.$emit('success')
          });
        } else {
          this.doExport();
          this.$emit('success')
        }
      },
      doExport: function () {
        tableToExcel(this.domName, this.name, "sheet1");
        // /* generate workbook object from table */

        // var xlsxParam = {
        //   raw: true
        // }; // 导出的内容只做解析，不进行格式转换
        // var wb = XLSX.utils.table_to_book(
        //   document.querySelector(this.domName),
        //   xlsxParam
        // );

        // /* get binary string as output */
        // var wbout = XLSX.write(wb, {
        //   bookType: "xlsx",
        //   bookSST: true,
        //   type: "array"
        // });
        // try {
        //   FileSaver.saveAs(
        //     new Blob([wbout], {
        //       type: "application/octet-stream"
        //     }),
        //     this.name + ".xlsx"
        //   );
        // } catch (e) {
        //   if (typeof console !== "undefined") {
        //     console.log(e, wbout);
        //   }
        // }
        // return wbout;
      }
    },
    created() {},
    mounted() {},
    beforeCreate() {},
    beforeMount() {},
    beforeUpdate() {},
    updated() {},
    beforeDestroy() {},
    destroyed() {},
    activated() {}
  };

</script>
<style  scoped>
</style>
